<template>
  <div>
    商品分类编辑

    <div class="zhong">
      <div class="block">
        <span class="demonstration">默认 click 触发子菜单</span>
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "navigation",
          label: "Navigation",
          children: [
            {
              value: "menu",
              label: "NavMenu 导航菜单",
            },
            {
              value: "tabs",
              label: "Tabs 标签页",
            },
            {
              value: "breadcrumb",
              label: "Breadcrumb 面包屑",
            },
            {
              value: "dropdown",
              label: "Dropdown 下拉菜单",
            },
            {
              value: "steps",
              label: "Steps 步骤条",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped>
.zhong {
  width: 80%;
  margin: 0 auto;
}
</style>